<template>
  <!-- 专家问诊详情页面  -->
  <div class="box">
    <div>
      <van-nav-bar
        title="专家问诊"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="box1">
      <p class="main1">
        <img class="mainImg" src="../img/安全 (1).png" alt="" />已实人认证
      </p>
      <p class="main2">执业证书号: {{ maskedIdCardNumber }}</p>
    </div>
    <div class="box2">
      <img class="box2img" :src="list.img" alt="" />
      <img
        data-v-f940dfa7=""
        class="now"
        src="https://kano.guahao.com/BJ1844511181.gif?webp=80"
        alt=""
      />
      <h2 class="main2H2">
        {{ list.name }}&nbsp;
        <span>
          <img @click="btnimg" class="img" :src="image" alt="" /> 关注</span
        >
      </h2>
      <p class="main3">
        {{ list.state }} &emsp;{{ list.administrativeOffice }}
      </p>
      <p class="main4">{{ list.nosocomium }} <span>三甲</span> ></p>
      <p class="main5">
        <b>{{ list.Ordertaking }}%</b>接诊率 &emsp;
        <b>{{ list.good }}%</b>问诊量 &emsp; <b>{{ list.recover }}%</b>评论回复
      </p>
    </div>
    <div class="box3">
      <img
        @click="router.push('/home/member')"
        src="../img/健康vip会员.png"
        alt=""
      />
    </div>
    <div class="box4">
      <div class="main6" @click="handleTabClick(0)">
        <img src="https://kano.guahao.com/eki163518705?webp=80" alt="" />
        <h3>图文问诊</h3>
        <h4>￥349</h4>
        <p>vip预估 ￥319</p>
      </div>
      <div class="main7" @click="handleTabClick(1)">
        <img src="https://kano.guahao.com/c8l163409161?webp=80" alt="" />
        <h3>电话问诊</h3>
        <h4>419</h4>
        <p>vip预估 ￥419</p>
      </div>
    </div>
    <div class="box5">
      <div class="main8">
        <div v-if="active === 0">
          <h3>文字、图片、语音方式和医生沟通</h3>
          <ul>
            <li>医生接诊后24小时内可不限次数交流</li>
            <li>医生24小时未接诊，自动退款</li>
          </ul>
        </div>
        <div v-if="active === 1">
          <h3>电话沟通，听到医生声音更安心</h3>
          <ul>
            <li>·通过电话和医生沟通检查、诊断、治疗等建议 15分钟充分交流</li>
            <li>如未建立医患沟通，可申请退款</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="box6" @click="consultatiopayment()">
      <van-button type="primary" class="box5btn"
        ><b>{{ btnValue }} </b></van-button
      >
    </div>
    <div class="box7">
      <span class="box7span1">活动</span> 医生正在参加线上活动 赶快点击参与吧！
      <span>></span>
    </div>
    <div class="patientHader">
      <h2>患者评价</h2>
      <span class="patientHaderSpan">查看全部></span>
    </div>

    <div class="patient" v-for="(item, index) in store.comment" :key="index">
      <div class="patientLeft">
        <img :src="item.img" alt="" />
      </div>
      <div class="patientRight">
        <div class="patientRightTop">
          <p>{{ item.name }}</p>
          <div style="display: flex; line-height: 0.2rem">
            <span
              style="
                display: inline-block;
                width: 0.7rem;
                height: 0.2rem;
                overflow: hidden;
              "
              >{{ item.timestamp }}</span
            >
            &ensp;
            <van-rate
              style="height: 0.2rem; line-height: 0.2rem"
              readonly
              v-model="item.recover"
              color="#ffd21e"
              :size="15"
              void-icon="star"
              void-color="#eee"
            />
          </div>
          <span class="patientTopSpan" @click="deleteComment(item.id)"
            >删除</span
          >
        </div>
        <div class="patientRightBottom">
          <van-text-ellipsis rows="2" :content="item.content" />
        </div>
      </div>
    </div>
    <div class="patientFunction">
      <div class="patientFunctionRight" @click="GiftGiving()">
        <span class="patientFunctionRightA">
          <img src="https://kano.guahao.com/Ho2169745998?webp=80" alt="" />
        </span>
        <h3>免费送花</h3>
        <span class="patientFunctionRightB">
          <img src="https://kano.guahao.com/zIC162770986?webp=80" alt="" />
        </span>
      </div>
      <div class="patientFunctionRight" @click="Comment(store.data.id)">
        <span class="patientFunctionRightA">
          <img src="https://kano.guahao.com/mgm162774025?webp=80" alt="" />
        </span>
        <h3>写评论</h3>
        <span class="patientFunctionRightB">
          <img src="https://kano.guahao.com/zIC162770986?webp=80" alt="" />
        </span>
        <div class="patientFunctionRightBottom">
          <img src="https://kano.guahao.com/6yX364821976?webp=80" alt="" />
          <span>有礼</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useCounterStore } from "../pinia/index"; //引入pinia
import { showToast } from "vant";
import { useRouter } from "vue-router";
const router = useRouter();
const btnValue = ref("实时问诊 ￥87");
interface Consultation {
  id: number;
  name: string;
  img: string;
  state: string;
  administrativeOffice: string;
  nosocomium: string;
  Ordertaking: string;
  good: string;
  recover: string;
  identitycard: string;
}
const store = useCounterStore();
const list = ref<Consultation>(store.data);
const image = ref(
  "https://zxsoss.oss-cn-beijing.aliyuncs.com/%E6%98%9F%E6%98%9F.png"
);
const onClickLeft = () => history.back();
const idCardNumber = list.value.identitycard;
const startPart = idCardNumber.substring(0, 4); // 获取开头4位
const endPart = idCardNumber.substring(idCardNumber.length - 2); // 获取末尾2位
const middlePart = "*".repeat(14); // 生成14个星号组成的字符串
const maskedIdCardNumber = startPart + middlePart + endPart;
// 点击关注取消
onMounted(() => {
  const isCollected = store.CollectList.find(
    (item: { identitycard: any }) => item.identitycard === idCardNumber
  );
  if (isCollected) {
    // 如果找到了当前医生在收藏列表中，设置已关注的图片链接
    image.value =
      "https://zxsoss.oss-cn-beijing.aliyuncs.com/ZS%E6%98%9F%E6%98%9F.png";
  } else {
    // 如果没找到，设置未关注的图片链接
    image.value =
      "https://zxsoss.oss-cn-beijing.aliyuncs.com/%E6%98%9F%E6%98%9F.png";
  }
});
const btnimg = () => {
  // 判断当前医生是否已存在于关注列表中
  // 如果当前医生不在关注列表中（findIndex返回 -1，表示未找到匹配的医生信息），执行以下关注操作
  if (
    store.CollectList.findIndex(
      (item: { identitycard: any }) => item.identitycard === idCardNumber
    ) === -1
  ) {
    showToast("关注医生成功");
    store.CollectList.push(list.value);
    image.value =
      "https://zxsoss.oss-cn-beijing.aliyuncs.com/ZS%E6%98%9F%E6%98%9F.png";
  } else {
    showToast("取消关注医生");
    store.CollectList.splice(
      store.CollectList.findIndex(
        (item: { identitycard: any }) => item.identitycard === idCardNumber
      ),
      1
    );
    image.value =
      "https://zxsoss.oss-cn-beijing.aliyuncs.com/%E6%98%9F%E6%98%9F.png";
  }
};

const active = ref(0);
const handleTabClick = (index: number) => {
  active.value = index;
  // 移除之前选中的tab的active类
  const tabs = document.querySelectorAll(".main6,.main7");
  tabs.forEach((tab) => tab.classList.remove("active"));
  // 添加当前选中tab的active类
  if (index === 0) {
    document.querySelector(".main6").classList.add("active");
    btnValue.value = "实时问诊 ￥87";
  } else {
    document.querySelector(".main7").classList.add("active");
    btnValue.value = "电话问诊 ￥99";
  }
};
//底部评论列表
//获取 pinia的数据进行渲染
// console.log(store.comment);

// 点击评论
const Comment = () => {
  router.push("/comment");
};
// 送礼页面
const GiftGiving = () => {
  router.push("/giftGiving");
};
// 评论删除
const deleteComment = (id: any) => {
  store.comment.splice(
    store.comment.findIndex((item: { id: any }) => item.id === id),
    1
  );
};
const consultatiopayment = () => {
  router.push("/consultationSum");
};
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  position: relative;
}

.box1 {
  width: 100%;
  height: 0.4rem;
  position: relative;

  .main1 {
    color: #2f7bff;
    margin-left: 0.1rem;
    border-radius: 0.3rem;
    padding-left: 0.2rem;
    text-align: center;
    line-height: 0.3rem;
    margin-top: 0.05rem;
    width: 1rem;
    height: 0.3rem;
    border: 1px solid #2f7bff;
    position: relative;

    .mainImg {
      width: 0.2rem;
      height: 0.2rem;
      position: absolute;
      left: 0.1rem;
      top: 0.05rem;
    }
  }

  .main2 {
    position: absolute;
    right: 0.1rem;
    top: 0.05rem;
    color: #8f8a8a;
    font-size: 0.13rem;
  }
}

.box2 {
  width: 100%;
  height: 1.6rem;
  background-color: #f6faff;
  position: relative;
  .now {
    position: absolute;
    width: 0.35rem;
    height: 0.2rem;
    top: 0.1rem;
    right: 0.7rem;
  }
  .box2img {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    position: absolute;
    right: 0.1rem;
    top: 0.1rem;
  }

  h2 {
    padding-left: 0.1rem;
  }

  span {
    font-size: 0.16rem;
    font-weight: normal;
  }

  .img {
    width: 0.17rem;
    height: 0.17rem;
  }

  .main3 {
    padding-left: 0.1rem;
    padding-top: 0.1rem;
    color: #5e616b;
  }

  .main4 {
    color: #5e616b;
    padding-left: 0.1rem;
    padding-top: 0.1rem;

    span {
      font-weight: bold;
      margin-left: 0.1rem;
      display: inline-block;
      width: 0.5rem;
      height: 0.2rem;
      border: 1px solid red;
      color: red;
      text-align: center;
      line-height: 0.2rem;
    }
  }

  .main5 {
    margin-top: 0.2rem;
    padding-left: 0.1rem;

    b {
      font-size: 0.25rem;
    }
  }
}

.box3 {
  width: 100%;
  height: 1.2rem;

  img {
    width: 100%;
    height: 100%;
  }
}

.box4 {
  width: 100%;
  height: 1.7rem;
  display: flex;

  div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 45%;
    height: 1.5rem;
    border: 1px solid #e3e2e2;
    margin-top: 0.1rem;
    margin-left: 0.1rem;

    img {
      width: 0.45rem;
      height: 0.45rem;
    }

    h3 {
      padding-top: 0.1rem;
    }

    h4 {
      padding-top: 0.02rem;
      color: red;
    }

    p {
      background-color: #fee1b1;
      padding: 0.05rem;
      font-size: 0.12rem;
    }
  }
}

.box5 {
  width: 100%;
  height: 1.8rem;
  background-color: #f5fafd;

  .main8 {
    width: 93%;
    height: 1.5rem;
    border: 1px solid #2f7bff;
    margin-left: 0.1rem;
    h3 {
      padding: 0.2rem;
    }
    ul {
      padding-left: 0.2rem;
      color: #717376;
    }
  }
}
.main6.active {
  background-color: #f5fafd;
  border: 1px solid #2f7bff;
}

.main7.active {
  background-color: #f5fafd;
  border: 1px solid #2f7bff;
}

.box6 {
  height: 0.6rem;
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  z-index: 99999;
  .box5btn {
    width: 3.4rem;
    height: 0.5rem;
    border-radius: 0.5rem;
    margin-left: 0.12rem;
    margin-top: 0.05rem;
  }
}
.box7 {
  width: 100%;
  height: 0.5rem;
  line-height: 0.5rem;
  background-color: #f3f8ff;
  .box7span1 {
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    font-size: 0.12rem;
    padding: 0.03rem;
    background-color: #fff;
    color: #91bef3;
    border: 1px solid #91bef3;
  }
}
.patient {
  width: 89%;
  height: 1.4rem;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  padding-top: 0.2rem;
  display: flex;
}
.patientLeft {
  width: 20%;
  height: 100%;
  float: left;
  img {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
  }
}
.patientRight {
  width: 80%;
  border-bottom: 1px solid #ccc;
}
.patientRightTop {
  width: 100%;
  height: 0.5rem;
  line-height: 0.3rem;
  font-size: 0.12rem;
  font-weight: 600;
  position: relative;
}
.patientTopSpan {
  position: absolute;
  right: 0;
  top: 0;
}
.patientRightBottom {
  width: 100%;
  height: 0.5rem;
  line-height: 0.5rem;
  padding-top: 0.1rem;
}
.patientHader {
  height: 0.5rem;
  line-height: 0.5rem;
  padding-left: 0.2rem;
  position: relative;
}
.patientHaderSpan {
  position: absolute;
  bottom: 0;
  right: 0.2rem;
}
.patientFunction {
  width: 100%;
  height: 2rem;
  margin-top: 0.2rem;
  //   background-color: red;
  display: flex;
}
.patientFunctionRight {
  height: 0.5rem;
  line-height: 0.5rem;
  margin-left: 0.2rem;
  width: 42%;
  background-color: #f5f6f6;
  text-align: center;
  position: relative;
}
.patientFunctionRightA {
  position: absolute;
  width: 0.2rem;
  height: 0.2rem;
  left: 0.1rem;
  bottom: 0.26rem;
}
.patientFunctionRightA span {
  width: 100%;
  height: 100%;
}
.patientFunctionRightA img {
  width: 100%;
  height: 100%;
}
.patientFunctionRightB {
  position: absolute;
  width: 0.2rem;
  height: 0.2rem;
  right: 0.1rem;
  top: 0.04rem;
}
.patientFunctionRightBottom {
  position: absolute;
  width: 0.9rem;
  line-height: 0.5rem;
  height: 0.5rem;
  right: 0;
  top: -0.3rem;
}
.patientFunctionRightBottom img {
  width: 0.5rem;
  height: 0.5rem;
}
.patientFunctionRightBottom span {
  position: absolute;
  display: inline-block;
  background-color: #ffcb3b;
  width: 0.4rem;
  height: 0.2rem;
  bottom: 0.1rem;
  right: -0.1rem;
  border-radius: 0, 50%, 50%, 0;
  line-height: 0.2rem;
  z-index: 999;
}
</style>